<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
          
            margin: 50px auto;
             border: 1px solid #666; 
        }

        .nav {
            width: 400px;
            height: 50px;
            background-color: black;
            display: flex;
        }

        li {
            list-style: none;
        }

        .lis {
            color: white;
            width: 80px;
            line-height: 50px;
            text-align: center;
        }

        ul {
            margin-left: 120px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <li class="lis liss">选项一</li>
            <li class="lis">选项二</li>
            <li class="lis">选项三</li>
        </div>
        <section>
            <ul>
                <li>内容一</li>
                <li>内容一</li>
            </ul>
            <ul>
                <li>内容二</li>
                <li>内容二</li>
            </ul>
            <ul>
                <li>内容三</li>
                <li>内容三</li>
            </ul>

        </section>


    </div>



    <script src="./jquery.js">

    </script>
</body>

</html>
<script>
    var lis = $('.lis');
    var index = 0;
    // 执行次数的lis.length
    lis.eq(0).css('background-color', '#D1D4D1');
    $('ul').eq(0).css('display', 'block');
    lis.mouseover(function (index) {
        console.log($(this).index());

        lis.eq($(this).index()).css('background-color', '#D1D4D1').siblings().css('background-color', 'black');
        // $('ul').first('.ul').css('display', 'block').siblings().css('display', 'none');

        $('ul').eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
    });


    // for (){
    //     li[i].index=i;
    // this.index
    // }

</script>